<template>
	<view >
		<city-select @cityClick="cityClick" :formatName="formatName" :activeCity="activeCity" :hotCity="hotCity"
			:obtainCitys="obtainCitys" :isSearch="true" ref="citys"></city-select>
	</view>
</template>

<script>
	import citySelect from '@/components/city-select/city-select.vue'

	export default {
		components: {
			citySelect
		},
		data() {
			return {
				keyword: "",
				list: [],
				isRequestIng: false,
				formatName: 'title',
				//当前城市
				activeCity: {
					id: 1,
					title: '南京市'
				},
				//热门城市
				hotCity: [],
				//显示的城市数据
				obtainCitys: [],
				currentCity:''
			};
		},
		onLoad(option) {
			if(option.city != ""){
				this.activeCity = {id:1,title:option.city}
				this.currentCity = option.city;
			}
		
		},
		onShow() {
			this.getCity();
		},
		methods: {
			search(e) {
				this.keyword = e.detail.value;
				console.info(e.detail.value);
				this.getCity();
			},

			cityClick(item) {
				console.log('选择了=====>：'+item.title);
				uni.setStorageSync("city", item.title);
				uni.navigateBack({
					delta: 1
				})
			},

			getCity() {

				let param = {

					keyword: this.keyword
				};
				if (this.isRequestIng == true) return;
				this.isRequestIng = true;
				let that = this;
				this.$api.getCityList(param).then(res => {

					that.isRequestIng = false;
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.obtainCitys = res.data.all;
						that.hotCity = res.data.hot;
						if(that.currentCity == ""){
							this.activeCity = {id:1,title:res.data.location}
							that.currentCity = res.data.location;
						}

					} else {

					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.select {
		.sear {
			width: 24rpx;
			height: 24rpx;
		}

		.inp {
			height: 60rpx;
		}

		.list {
			height: calc(100vh - 180rpx);
			border-radius: 24rpx 24rpx 0 0;

			.item {
				width: 33.3%;
				box-sizing: border-box;

				text {
					display: inline-block;
					width: calc(100% - 8rpx);
				}
			}
		}
	}
</style>